<template>
  <!-- 税务观察 -->
  <div v-if="TaxWatch == `1`" class="container container--hero" role="region">
    <div class="region region--full">
      <div class="component component--module breadcrumbs">
        <div class="column column--full">
          <ol class="list list--breadcrumbs">
            <li class="breadcrumb__item">
              <a class="link" href="">
                <span itemprop="name">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">家</font>
                  </font>
                </span>
              </a>
              <meta itemprop="position" content="1" />
            </li>
            <li class="breadcrumb__item">
              <span itemprop="item" class="link">
                <span itemprop="name">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">税务观察</font>
                  </font>
                </span>
              </span>
              <meta itemprop="position" content="2" />
            </li>
          </ol>
        </div>
      </div>
      <div class="component component--module special-report">
        <figure class="hero__figure">
          <img class="hero__image lazyautosizes lazyloaded"
            src="https://s.marketwatch.com/public/resources/images/MW-IY037_taxwat_ZG_20210111164226.jpg" />
        </figure>
        <div class="column column--full align--left">
          <figcaption class="hero__credit">
            <i class="icon icon--info"></i>
            <span class="caption">MarketWatch illustration</span>
          </figcaption>
          <header class="header header--hero" style="border-color: #fdd821">
            <h2 class="title" style="border-color: #fdd821">
              <span class="label">
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">税务观察</font>
                </font>
              </span>
            </h2>
          </header>

          <div class="element element--ad is-loaded">
            <div id="ad-section-sponsor" class="j-ad lazyloaded" style="display: none">
              <div id="google_ads_iframe_/2/marketwatch.com/personal_finance/taxwatch_0__container__"
                style="border: 0pt none; width: 140px; height: 0px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--引入 cateGorymenu 传参-->
  <cateGorymenu></cateGorymenu>
  <div class="region region--full">
      <comImg :imgData="imgData"></comImg>
    </div>
  <main id="maincontent" role="main">
    <div class="container container--zone" role="region">
      <!-- 个人财务 -->
      <div class="region region--full removeLive">
        <div class="component component--module quick-links">
          <!-- 此处是tab切换 -->
          <tabText :moreList='moreList' :listlinkData='uscomlinkData' @tabChange="tabChange"></tabText>
        </div>
      </div>
      <div class="region region--primary">
        <!-- 引入公共组件面包屑  pageHead.vue-->
        <pageHead :titleData="titleData"></pageHead>
        <div class="component component--layout layout--D2">
          <header class="header header--secondary">
            <p class="paragraph">
              Stories on what the financial news of the day means for your
              wallet.
            </p>
          </header>
          <!-- 引入封装 头条 -->
          <frontPage :FrontData="FrontData" :FrontData1="FrontData1" :titleName="titleName" v-if="isFront"></frontPage>
        </div>
        <div class="component component--module text__block">
          <div class="column column--primary">
            <div class="element element--textblock">
              <hr />
              <p></p>
              <h3>📩 Personal Finance Daily</h3>
              <p>
                Get a daily roundup of the top reads in personal finance
                delivered to your inbox. Subscribe to MarketWatch's free
                Personal Finance Daily newsletter.
              </p>
              <p><a href="">Sign up</a> ➡</p>
            </div>
          </div>
        </div>
      </div>
      <stickys :sticky="sticky"></stickys>
    </div>
    <div class="container container--zone" role="region">
      <!-- 引入公共组件  marketPlace.vue  We Make-->
      <marketPlace></marketPlace>
      <!-- 引入 MOST POPULAR 组件 -->
      <mastPopular></mastPopular>
    </div>
    <div class="container container--zone" role="region">
      <div class="region region--primary">
        <!-- realEstate -->
        <!-- <realEstate :newsData1="newsData1"></realEstate> -->
        <header class="header header--secondary">
          <h2 class="title">
            <a class="link" href="">{{ lastData.title }}</a>
          </h2>
          <p class="paragraph">{{ lastData.desc }}</p>
        </header>
        <marketLine :lastMarketData="lastMarketData" v-if="lastMarketData.length > 0"></marketLine>
        <!-- 封装 引入 taxes 传参-->
        <taxes :taxesData="taxesData" :taxCont='taxCont' v-if="taxesData.length > 0"></taxes>
        <!-- 封装 引入 movement 传参-->
        <movement :movementData="movementData" :movementData1="movementData1" :movementData2="movementData2"
          :spendingData="spendingData" :spendingData1="spendingData1"></movement>
        <!-- morePersonal -->
        <morePersonal :moreHeader="moreHeader" :moreData="moreData" v-if="moreData.length > 0"></morePersonal>
      </div>
      <stickys :sticky="sticky"></stickys>
    </div>
  </main>
  <adverTisement></adverTisement>
</template>

<script setup>
import cateGorymenu from "@/views/latestNews/cateGorymenu/cateGorymenu.vue"; //头部
// 引入公共组件  marketPlace.vue  We Make
import marketPlace from "@/views/latestNews/hotheHeadlines/marketPlace/marketPlace";
import frontPage from "@/views/latestNews/hotheHeadlines/frontPage/frontPage";
import { newsDataArrays } from "@/api/latest.js";
const {
  latestData,
  districtData,
} = newsDataArrays();
// 引入面包屑模块
import pageHead from "@/components/pageHead/pageHead";
// import '@/text.css';
// 引入 MOST POPULAR 组件
import mastPopular from "@/views/home/mastPopular/mastPopular";
import marketLine from '@/views/market/marketLine/marketLine.vue'
// realEstate.vue
import realEstate from "@/views/personalFinance/realEstate/realEstate";
// 引入 taxes 传参
import taxes from "@/views/personalFinance/taxes/taxes";
// 引入 movement 传参
import movement from "@/views/personalFinance/movement/movement.vue";
// morePersonal
import morePersonal from "@/views/personalFinance/morePersonal/morePersonal";
import adverTisement from "@/views/home/adverTisement/adverTiseMent";
import comImg from "@/components/comImg/comImg.vue";
const imgData = ref("../src/assets/banner.png");
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
import homeRequest from "@/api/home.js";
const titleData = reactive({
  title: "Personal Finance",
  link: "Home",
  name: "Personal Finance",
});
const moreHeader = ref({
  content: "",
});
const moreList = ref([])
const uscomlinkData = ref([])
const titleName = ref({
  title: '',
  name: ''
})
const FrontData = ref([])
const FrontData1 = ref([])
const tabKey = ref('')
const isFront = ref(false)
const lastMarketData = ref([])
const lastData = ref({
  title: '',
  desc: ''
})
const taxCont = reactive({})
const movementData = ref([])
const movementData1 = ref([])
const movementData2 = ref([])
const spendingData = ref([])
const spendingData1 = ref([])
const taxesData = ref([])
const moreData = ref([])
onMounted(() => {
  // 刷新时保持数据
  let name = window.sessionStorage.getItem('titlepfData')
  if (name) {
    titleData.title = JSON.parse(name).typeName
    titleData.name1 = titleData.title
    tabKey.value = JSON.parse(name).typeKey
  }
  const data = localStorage.getItem('tabMdData')
  uscomlinkData.value = JSON.parse(data).pf
  uscomlinkData.value.forEach((item) => {
    if (item.typeName === 'Personal Finance') {
      item.path = '/personalFinance'
      titleData.title = item.typeName
      titleData.name1 = titleData.title
      tabKey.value = item.typeKey
    } else if (item.typeName === 'The Moneyist') {
      item.path = '/personalFinance/moneyist'
    } else if (item.typeName === "Spending & Saving") {
      item.path = '/personalFinance/spending'
    } else if (item.typeName === "TaxWatch") {
      item.path = '/personalFinance/taxwatch'
    } else if (item.typeName === "Real Estate") {
      item.path = '/personalFinance/estate'
    } else if (item.typeName === "The Big Move") {
      item.path = '/personalFinance/bigmove'
    } else if (item.typeName === "Help My Career") {
      item.path = '/personalFinance/career'
    } else if (item.typeName === "The Human Cost") {
      item.path = '/personalFinance/human'
    } else if (item.typeName === "Financial Face-Off") {
      item.path = '/personalFinance/financial'
    }
  })
  getNewList(tabKey.value)
  getGroupList(tabKey.value)
})
const tabChange = (data) => {
  // 点击Tba切换时存数据
  window.sessionStorage.setItem('titlepfData', JSON.stringify(data))
  titleData.title = data.typeName
  titleData.name1 = titleData.title
  tabKey.value = data.typeKey
  
  getNewList(tabKey.value)
  getGroupList(tabKey.value)
}
//请求数据 获取新闻
const getNewList = (tabkey) => {
  let data = {
    current: 1,
    size: 50,
    isImg: 1,
    key: tabkey
  }
  homeRequest.newsData(data)
    .then((res) => {
      if (res.code === 0) {
        // 头部第一部分
        if (res.data.records.length > 0) {
          FrontData.value = res.data.records.slice(0, 2)
          FrontData1.value = res.data.records.slice(2, 6)
          isFront.value = true
        }
      }
    })
    .catch((e) => {
    });
}
const getGroupList = (tabkey) => {
  //新闻列表
  let data = {
    key: tabkey,
  };
  homeRequest.getgroupData(data).then((res) => {
    if (res.code === 0) {
      if (res.data.ap.news.length > 0) {
        lastMarketData.value = res.data.ap.news
        lastData.value.title = res.data.ap.author
        lastData.value.desc = res.data.ap.news[0].summary
      }
      if (res.data.auto.news.length > 0) {
        taxCont.title = res.data.auto.author
        taxCont.desc = res.data.auto.news[0].summary
        taxesData.value = res.data.auto.news
      }
      if (res.data.bs.news.length > 0) {
        movementData.value.push(res.data.bs.news[0])
      }
      if (res.data.bs.news.length > 1) {
        movementData1.value.push(res.data.bs.news[1])
      } else {
        movementData1.value = []
      }
      if (res.data.bs.news.length > 2) {
        movementData2.value.push(res.data.bs.news[2])
      } else {
        movementData2.value = []
      }
      if (res.data.bs.news.length > 3) {
        movementData2.value = res.data.bs.news.slice(3, res.data.bs.news.length)
      }
      if (res.data.cl.news.length > 0) {
        spendingData.value.push(res.data.cl.news[0])
        spendingData1.value = res.data.cl.news.slice(1, res.data.cl.news.length)
      }
      if (res.data.djn.news.length > 0) {
        moreHeader.value.content = res.data.djn.author
        moreData.value = res.data.djn.news
        console.log(moreData.value, 'moreData.value')
      }
    }
  })
}
</script>

<style scoped></style>
